<template>
  <div class="i18n-example">
    <h2>{{ $t('messages.hello') }}</h2>
    <p>{{ $t('messages.name') }}</p>

    <!-- 使用组合函数的方式 -->
    <!-- 语言切换按钮 -->
    <div class="language-switcher">
      <button @click="setLocale('en')" :class="{ active: currentLocale === 'en' }">English</button>
      <button @click="setLocale('ja')" :class="{ active: currentLocale === 'ja' }">日本語</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

// 使用vue-i18n的组合API
const { locale } = useI18n()

const currentLocale = computed(() => locale.value)

const setLocale = (newLocale: string) => {
  locale.value = newLocale
}
</script>

<style scoped>
.i18n-example {
  padding: 20px;
}

.language-switcher {
  margin-top: 20px;
}

.language-switcher button {
  margin-right: 10px;
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: white;
  cursor: pointer;
}

.language-switcher button.active {
  background: #007bff;
  color: white;
}
</style>
